<template>
  <div class="app-container">
    <div class="chart-container">
      <!-- 作业完成率分析 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>作业完成率分析</span>
        </div>
        <div id="completion-rate" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 作业正确率分析 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>作业正确率分析</span>
        </div>
        <div id="accuracy-rate" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 作业完成时间分析 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>作业完成时间分析</span>
        </div>
        <div id="completion-time" style="width: 100%; height: 400px;"></div>
      </el-card>

      <!-- 作业完成情况与成绩关系 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>作业完成情况与成绩关系</span>
        </div>
        <div id="homework-score-relation" style="width: 100%; height: 400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
// import learningProcessData from '@/mock/learning-process'
// import shuxueData from '../class-overview/shuxue'

export default {
  name: 'HomeworkAnalysis',
  data() {
    return {
      // 作业完成率区间
      completionRates: [
        { value: 30, name: '90%以上' },
        { value: 15, name: '70%-89%' },
        { value: 5, name: '70%以下' }
      ],
      // 作业正确率区间
      accuracyRates: [
        { value: 25, name: '85%以上' },
        { value: 20, name: '60%-84%' },
        { value: 5, name: '60%以下' }
      ],
      // 作业完成时间区间
      timeRanges: ['30分钟以下', '30-45分钟', '45-60分钟', '60分钟以上'],
      // 作业类型
      homeworkTypes: [
        '基础知识',
        '阅读理解',
        '写作练习',
        '综合应用',
        '拓展训练'
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.drawCompletionRate()
      this.drawAccuracyRate()
      this.drawCompletionTime()
      this.drawHomeworkScoreRelation()
    },
    // 绘制作业完成率分析图
    drawCompletionRate() {
      const chart = echarts.init(document.getElementById('completion-rate'))
      const option = {
        title: {
          text: '作业完成率分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['90%以上', '70%-89%', '70%以下']
        },
        series: [
          {
            name: '作业完成率',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.completionRates
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制作业正确率分析图
    drawAccuracyRate() {
      const chart = echarts.init(document.getElementById('accuracy-rate'))
      const option = {
        title: {
          text: '作业正确率分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['85%以上', '60%-84%', '60%以下']
        },
        series: [
          {
            name: '作业正确率',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.accuracyRates
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制作业完成时间分析图
    drawCompletionTime() {
      const chart = echarts.init(document.getElementById('completion-time'))
      const option = {
        title: {
          text: '作业完成时间分析',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['完成率90%以上', '完成率70%-89%', '完成率70%以下'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.timeRanges
        },
        yAxis: {
          type: 'value',
          name: '学生人数'
        },
        series: [
          {
            name: '完成率90%以上',
            type: 'bar',
            stack: 'total',
            data: [5, 15, 8, 2],
            itemStyle: {
              color: '#67C23A'
            }
          },
          {
            name: '完成率70%-89%',
            type: 'bar',
            stack: 'total',
            data: [3, 8, 3, 1],
            itemStyle: {
              color: '#E6A23C'
            }
          },
          {
            name: '完成率70%以下',
            type: 'bar',
            stack: 'total',
            data: [2, 1, 1, 1],
            itemStyle: {
              color: '#F56C6C'
            }
          }
        ]
      }
      chart.setOption(option)
    },
    // 绘制作业完成情况与成绩关系图
    drawHomeworkScoreRelation() {
      const chart = echarts.init(document.getElementById('homework-score-relation'))
      const option = {
        title: {
          text: '作业完成情况与成绩关系',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['平均成绩', '最高成绩', '最低成绩'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['完成率90%以上', '完成率70%-89%', '完成率70%以下']
        },
        yAxis: {
          type: 'value',
          name: '成绩',
          min: 0,
          max: 100,
          interval: 20
        },
        series: [
          {
            name: '平均成绩',
            type: 'bar',
            data: [92, 78, 65],
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '最高成绩',
            type: 'line',
            data: [98, 85, 72],
            itemStyle: {
              color: '#67C23A'
            },
            markPoint: {
              data: [
                { type: 'max', name: '最高分' }
              ]
            }
          },
          {
            name: '最低成绩',
            type: 'line',
            data: [85, 70, 58],
            itemStyle: {
              color: '#F56C6C'
            },
            markPoint: {
              data: [
                { type: 'min', name: '最低分' }
              ]
            }
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
  .chart-container {
    grid-template-columns: 1fr;
  }
}
</style>
